<script lang="ts" setup>
import userAvatar from './lucImages/userAvatar.vue';
</script>

<template>
  <div class="persona_info_card">
    <el-card shadow="always">
      <!-- 基本信息 -->
      <div class="persona_info_basic">
        <!-- 头像 -->
        <div class="persona_info_avatar">
          <userAvatar id="15" width="5.8rem" height="5.8rem" />
        </div>
        <div class="persona_info_basic_info">
          <div class="font-bold text-6">召唤师召唤师名称</div>
          <div class="opacity-70 text-4">召唤师ID: 123454321123</div>
          <div class="text-4">Lv. 264</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss">
.persona_info_card {
  .persona_info_basic {
    display: flex;
    align-items: center;
    gap: 1.5rem;

    .persona_info_avatar {
      flex-shrink: 0;
    }
    .persona_info_basic_info {
      flex: 1;
      line-height: 1.5;
    }
  }
}
</style>
